<template>
    <div class="synchronize-rename">
        <h3>
            <strong>Color name editing</strong>
            <span>We will combine all selected color variations of the two products into one "Color options" menu for your customers to choose from. </span>
        </h3>

        <div class="synchronize-rename-body">
            <table>
                <colgroup>
                    <col width="35%">
                    <col width="20%">
                    <col width="45%">
                </colgroup>
                <thead>
                    <tr>
                        <th colspan="2">Your customers to choose</th>
                        <th>Color options</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="product in clothes" :key="product.design_id" v-show="product.color_names.length > 0">
                        <td>
                            <label>
                                <input type="text" v-model="product.sub_title" @input="productInput(product,$event)">
                                <svg-icon name="edit-pencil" />
                            </label>
                        </td>
                        <td>
                            <p v-for="color in product.color_names" :key="color.color_id">
                                <i :style="{backgroundColor:color.color_num}"></i>
                                <span v-text="color.color_name"></span>
                            </p>
                        </td>
                        <td>
                            <label v-for="item in product.color_names" :key="item.color_id" :type="getErrorType(item,product)">
                                <input type="text" v-model="item.name" @change="checkError()">
                                <svg-icon name="edit-pencil" />
                            </label>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="synchronize-rename-notify" :class="{active: notify == 'exceed'}">
                <cite>
                    <img src="@/assets/images/synchronize/synchronize-exceed.png">
                    <span>According to {{shop.platform}}, the length of the color name cannot exceed 50 characters.</span>
                    <button @click="notify = ''">Got it</button>
                </cite>
            </div>

            <div class="synchronize-rename-notify" :class="{active: notify == 'duplicate'}">
                <cite>
                    <img src="@/assets/images/synchronize/synchronize-duplicate.png">
                    <span>According to {{shop.platform}}, a single item cannot have two identical color names.</span>
                    <button @click="notify = ''">Got it</button>
                </cite>
            </div>
        </div>

    </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "SynchronizeRenamee",
    data () {
        return {
            error: [],
            notify: '', // 提示
        };
    },
    computed: {
        ...mapState("synchronize", {
            clothes: "clothes",
            shop: "shop",
        }),
    },
    methods: {
        getErrorType (item, product) {
            const active = this.error.findIndex(i => i.design_id == product.design_id && i.color_id == item.color_id)
            if (active >= 0) {
                return this.error[active].type;
            } else {
                return ''
            }
        },
        productInput (product, event) {
            (product.color_names || []).map(item => {
                item.name = product.sub_title + '-' + item.color_name;
            })
            this.checkError();
        },

        // 检查错误
        checkError () {

            const cache = new Map();
            const error = [];

            // 先判断超长，再判断是否重名
            this.clothes.map(product => {
                (product.color_names || []).map(item => {

                    const duplicate_id = cache.get(item.name)

                    if (item.name && item.name.length > 50) {
                        // 超长
                        error.push({ design_id: product.design_id, color_id: item.color_id, type: 'exceed' })
                    } else if (item.name && duplicate_id) {
                        // 重名
                        error.push({ design_id: product.design_id, color_id: item.color_id, type: 'duplicate' })
                        // 原来的也要设置为重名
                        if (error.findIndex(i => i.color_id == duplicate_id) < 0) {
                            error.push({ design_id: product.design_id, color_id: duplicate_id, type: 'duplicate' })
                        }
                    }
                    cache.set(item.name, item.color_id);
                })
            });

            this.error = error;
        },

        // 检查更新
        checkup () {
            this.checkError()
            if (this.error.length > 0) {
                const exceed = this.error.findIndex(i => i.type == 'exceed')
                if (exceed >= 0) {
                    this.notify = 'exceed'
                } else {
                    this.notify = 'duplicate';
                }

                return false;
            } else {
                this.notify = false;
                return true;
            }
        },
    },
    created () {
        this.checkup();
        this.$on('global:SYNCHRONIZE_CHECK', this.checkup)
    },
};
</script>
<style lang="scss" scoped>
.synchronize-rename {
    margin-bottom: 32px;
    margin-top: 16px;
    h3 {
        padding-left: 48px;
        position: relative;

        strong {
            display: block;
            font-size: 16px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 18px;
        }
        span {
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;
            line-height: 16px;
            margin-top: 6px;
        }

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            background-image: url(@/assets/images/synchronize-rename.png);
            background-size: 100% 100%;
        }
    }

    .synchronize-rename-body {
        margin-top: 24px;
        position: relative;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        th,
        td {
            line-height: 28px;
            padding: 0;
            border: 1px solid #e0e0e0;
        }
        th {
            height: 46px;
            background: #f6f6f6;
            color: #000;
        }
        label,
        p {
            padding: 4px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            display: flex;
            align-items: center;
            color: #000;
            & > i {
                width: 14px;
                height: 14px;
                border-radius: 1px;
                margin: 0 6px;
                border: 1px solid rgba(0, 0, 0, 0.2);
            }
            & + p,
            & + label {
                position: relative;
                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 1px;
                    background-color: #e0e0e0;
                }
            }
        }

        label {
            position: relative;
            svg {
                position: absolute;
                width: 18px;
                height: 18px;
                right: 8px;
                top: 50%;
                margin-top: -9px;
                fill: #949494;
                stroke: #949494;
            }

            &:hover {
                svg {
                    fill: #ea4c89;
                    stroke: #ea4c89;
                }
            }

            // 超长
            &[type='exceed'] {
                input {
                    padding-left: 24px;
                    background-image: url(@/assets/images/synchronize/synchronize-exceed.png);
                    background-size: 14px 14px;
                    background-repeat: no-repeat;
                    background-position: 6px center;
                    color: #f44336;

                    &:focus {
                        color: #000;
                        background-image: none;
                        padding-left: 6px;
                    }
                }
            }

            // 重名
            &[type='duplicate'] {
                input {
                    padding-left: 24px;
                    background-image: url(@/assets/images/synchronize/synchronize-duplicate.png);
                    background-size: 14px 14px;
                    background-repeat: no-repeat;
                    background-position: 6px center;
                    color: #f44336;

                    &:focus {
                        color: #000;
                        background-image: none;
                        padding-left: 6px;
                    }
                }
            }
        }

        input {
            height: 28px;
            box-sizing: border-box;
            line-height: 14px;
            font-size: 12px;
            border: none;
            padding: 6px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            border: 1px solid transparent;
            padding-right: 32px;
            &:focus {
                border-color: #ea4c89;

                & + svg {
                    display: none;
                    fill: #ea4c89;
                    stroke: #ea4c89;
                }
            }
        }

        td:first-child {
            label {
                max-width: 288px;
                margin: 0 auto;
            }
        }
    }

    .synchronize-rename-notify {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba($color: #000000, $alpha: 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 3;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
        cite {
            background: #ffffff;
            box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.18);
            border-radius: 6px;
            padding: 28px;
            box-sizing: border-box;
            width: 100%;
            max-width: 800px;
            display: flex;
            margin: 0 18px;
            align-items: center;
            img {
                width: 24px;
                height: 24px;
            }
            span {
                margin: 0 12px;
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #f44336;
                line-height: 18px;
                flex: 1;
            }

            button {
                height: 32px;
                width: 68px;
                font-size: 14px;
            }
        }

        &.active {
            opacity: 1;
            pointer-events: all;
        }
    }
}
</style>
